import styles from './index.module.less'
import { useProcessMiningEngineStore } from '../../store'
import { Switch } from '@terminus/nusi-slim'

const SettingTab = () => {

	const { selectedNode, processConfig, setProcessConfig } = useProcessMiningEngineStore()


	return (
		<div className={styles.settingTab}>
			<div className={styles.settingTabHeader}>
				<div className={styles.settingTabHeaderTitle}>
					<span>元素设置</span>
				</div>
			</div>
			<div className={styles.settingTabContent}>
				{selectedNode?.id ? (
					<div className={styles.settingTabContentItem}>
						<div className={styles.settingTabContentItemTitle}>
							<span>名称</span>
							<span>{selectedNode?.title}</span>
						</div>
					</div>
				) : null}
				<div className={styles.settingTabContentItem}>
					<div className={styles.settingTabContentItemTitle}>
						<span>流程可视性</span>
					</div>
					<div className={styles.settingTabContentItemContent}>
						<div className={styles.settingTabContentItemContentItem}>
							<Switch checked={processConfig?.showAllCase} onChange={() => setProcessConfig({ ...processConfig, showAllCase: !processConfig?.showAllCase })} />
							<span>显示全部节点</span>
						</div>
						<div className={styles.settingTabContentItemContentItem}>
							<Switch checked={processConfig?.showNodeWithData} onChange={() => setProcessConfig({ ...processConfig, showNodeWithData: !processConfig?.showNodeWithData })} />
							<span>显示带数据的节点</span>
						</div>
					</div>
				</div>
			</div>
		</div>
	)
}

export default SettingTab